<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas {
            min-width: 300px;
            margin: 10px;
            /*min-height:200px;*/
            background: #ddd;
        }
    </style>
</head>
<body>
<div id="frame"></div>
<!--<canvas id="canvas2"></canvas>-->
<!--<canvas id="canvas1"></canvas>-->
<img src="../../static/images/1.jpg" height="501" width="700" style="display: none"/>
<script>
    //https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
    function creatCanvas() {
        let canvas = document.createElement('canvas');
        document.body.append(canvas);
        return canvas.getContext("2d");
    }
    function drawSpirograph(ctx, R, r, O) {
        var x1 = R - O;
        var y1 = 0;
        var i = 1;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        do {
            if (i > 20000) break;
            var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72));
            var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
            ctx.lineTo(x2, y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R - O && y2 != 0);
        ctx.stroke();
    }

    function drawStar(ctx, r) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(r, 0);
        for (let i = 0; i < 9; i++) {
            ctx.rotate(Math.PI / 5);
            if (i % 2 == 0) {
                ctx.lineTo((r / 0.525731) * 0.2000811, 0)
            } else {
                ctx.lineTo(r, 0);
            }
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
    //循环全景照片
    var img18 = new Image();
    img18.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
    var scale = 0.5;
    var CanvasXSize = 300;
    var CanvasYSize = 150;
    var clear = {x: 800, y: 200};
    var x18 = 0;
    var imgW, imgH;
    var context18 = creatCanvas();
    var y18 = -4.5;
    var dx = 0.75;
    img18.onload = function () {
        imgW = img.width * 1.5;
        imgH = img.height * scale;
        clear.x = imgW > CanvasXSize ? imgW : CanvasXSize;
        clear.y = imgH > CanvasYSize ? imgH : CanvasYSize;
        x18 = imgW - CanvasXSize > 0 ? 0 : CanvasXSize - imgW;
        window.requestAnimationFrame(draw18)
    }

    function draw18() {
        context18.clearRect(0, 0, clear.x, clear.y);
        if (imgW <= CanvasXSize) {
            if (x18 > CanvasXSize) {
                x18 = 0;
            }
            if (x18 > (CanvasXSize - imgW)) {
                context18.drawImage(img18, x18 - CanvasXSize+1, y18, imgW, imgH);
            }
        }else {
            if (x18 > (CanvasXSize)) { x18 = CanvasXSize-imgW; }
            if (x18 > (CanvasXSize-imgW)) { context18.drawImage(img18,x18-imgW+1,y18,imgW,imgH); }
        }
        context18.drawImage(img18, x18, y18, imgW, imgH);
        x18 += dx;
        window.requestAnimationFrame(draw18)
    }


    //动画
    var context17 = creatCanvas();
    var sun = new Image();
    var earth = new Image();
    var moon = new Image();
    sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
    moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
    earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
    window.requestAnimationFrame(draw17)

    function draw17() {
        context17.globalCompositeOperation = 'destination-over';
        context17.clearRect(0, 0, 150, 150);
        context17.fillStyle = 'rgba(0,0,0,0.4)';
        context17.strokeStyle = 'rgba(0,153,255,0.4)';
        context17.save();
        context17.translate(75, 75);

        var time = new Date();
        context17.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
        context17.translate(50, 0);
        context17.fillRect(0, -12, 18, 24);
        context17.drawImage(earth, -12, -12);

        context17.save();
        context17.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
        context17.translate(0, 22.5);
        context17.drawImage(moon, -3.5, -3.5);
        context17.restore();

        context17.restore();
        context17.beginPath();
        context17.arc(75, 75, 50, 0, Math.PI * 2, false);
        ;
        context17.stroke();
        context17.drawImage(sun, 0, 0, 150, 150);
        window.requestAnimationFrame(draw17);
    }
    //裁剪
    var context16 = creatCanvas();
    context16.fillRect(0, 0, 150, 150);
    context16.translate(75, 75);
    context16.beginPath();
    context16.arc(0, 0, 60, 0, Math.PI * 2, true);
    context16.clip();

    var lingrad = context16.createLinearGradient(0, -75, 0, 75);
    lingrad.addColorStop(0, '#232256');
    lingrad.addColorStop(1, '#143778');
    context16.fillStyle = lingrad;
    context16.fillRect(-75, -75, 150, 150);
    for (var j = 1; j < 100; j++) {
        context16.save();
        context16.fillStyle = '#fff';
        context16.translate(75 - Math.floor(Math.random() * 150),
            75 - Math.floor(Math.random() * 150));
        drawStar(context16, Math.floor(Math.random() * 4) + 2);
        context16.restore();
    }

    //变形
    var context15 = creatCanvas();
    var sin = Math.sin(Math.PI / 6);
    var cos = Math.cos(Math.PI / 6);
    context15.translate(100, 80);
    var c = 0;
    for (var i = 0; i <= 12; i++) {
        c = Math.floor(255 / 12 * i);
        context15.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        context15.fillRect(0, 0, 50, 5);
        context15.transform(cos, sin, -sin, cos, 0, 0);
    }
    context15.setTransform(-1, 0, 0, 1, 50, 100)
    context15.fillStyle = "rgba(255, 128, 255, 0.5)";
    context15.fillRect(0, 50, 50, 100);

    //缩放
    var context14 = creatCanvas();
    context14.strokeStyle = '#fc0';
    context14.lineWidth = 1.5;
    context14.fillRect(0, 0, 300, 300);
    context14.save();
    context14.translate(50, 50);
    drawSpirograph(context14, 22, 6, 5)

    context14.translate(100, 0);
    context14.scale(0.75, 0.75);
    drawSpirograph(context14, 22, 6, 5);

    context14.translate(133, 0);
    context14.scale(0.75, 0.75); //两次缩放 0.75*0.75
    drawSpirograph(context14, 22, 6, 5);

    context14.restore();
    context14.restore();
    context14.translate(253, 120);
    context14.scale(1, 0.75); //缩放 0.75
    drawSpirograph(context14, 22, 6, 5);
    //旋转
    var context13 = creatCanvas();
    context13.translate(150, 75);
    for (let i = 1; i < 6; i++) {
        context13.save();
        context13.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
        for (let j = 0; j < i * 6; j++) {
            context13.rotate(Math.PI * 2 / (i * 6));
            context13.beginPath();
            context13.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
            context13.fill();
        }
        context13.restore();
    }

    //移动
    var context12 = creatCanvas();
    context12.fillRect(0, 0, 300, 300);
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            context12.save();
            context12.strokeStyle = "#9CFF00";
            context12.translate(50 + j * 100, 50 + i * 50);
            drawSpirograph(context12, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
            context12.restore();
        }
    }
    //save restore
    var context11 = creatCanvas();
    context11.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
    context11.save();// 保存默认状态 黑色
    context11.fillStyle = '#09F';
    context11.fillRect(15, 15, 120, 120);
    context11.save();// 保存默认状态 蓝色
    context11.fillStyle = '#FFF';
    context11.globalAlpha = 0.5;
    context11.fillRect(30, 30, 90, 90);
    context11.restore();//恢复上一次，蓝色
    context11.fillRect(45, 45, 60, 60);
    context11.restore(); //恢复上一次，黑色
    context11.fillRect(60, 60, 30, 30);

    //图片缩放
    var img = document.querySelector('img');
    var context10 = creatCanvas();
    var n10 = 0;
    function clipDraw() {
        if (n10 > Math.max(img.width, img.height) / 30) {
            n10 = 0;
            context10.clearRect(0, 0, 300, 300);
        }
        n10++;
        //canvas
        var dx = 0;
        var dy = 0;
        var dWidth = Math.min(n10 * 10 + 1, img.width);
        var dHeight = Math.min(n10 * 10 + 1, img.height);

        //图像的
        var sx = 0;
        var sy = 0;
        var sWidth = dWidth * 2; //宽度缩放
        var sHeight = dHeight * 2;
        context10.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //裁剪
        setTimeout(clipDraw, 400);
    }
    clipDraw();
    var context9 = creatCanvas();
    context9.drawImage(img, 15, 20, 200, 150); //压缩


    //文字
    var context8 = creatCanvas();
    context8.shadowOffsetX = 2;
    context8.shadowOffsetY = 2;
    context8.shadowBlur = 2;
    context8.shadowColor = "rgba(0, 0, 0, 0.5)";
    context8.font = "20px Times New Roman";
    context8.fillStyle = "Black";
    context8.fillText("文字阴影", 5, 30);
    console.log(context8.measureText("文字阴影"))


    var context7 = creatCanvas();
    context7.beginPath();
    context7.arc(50, 50, 30, 0, Math.PI * 2, true);
    context7.arc(50, 50, 15, 0, Math.PI * 2, true);
    context7.fill("evenodd");

    var context6 = creatCanvas();
    var linear = context6.createLinearGradient(0, 0, 0, 150);
    linear.addColorStop(0, '#00ABEB');
    linear.addColorStop(0.5, '#fff');
    var radgrad = context6.createRadialGradient(50, 50, 10, 62, 60, 50);

    radgrad.addColorStop(0, '#A7D30C');
    radgrad.addColorStop(0.9, '#019F62');
    radgrad.addColorStop(1, 'rgba(1,159,98,0)');
    context6.lineWidth = 15;
    context6.strokeStyle = linear;
    context6.fillStyle = radgrad;
    context6.fillRect(10, 10, 130, 130);
    context6.strokeRect(50, 50, 50, 50);

    //dash offset
    var context5 = creatCanvas();
    var offset = 0;
    function draw() {
        context5.clearRect(0, 0, 100, 100)
        context5.strokeRect(10, 10, 100, 100);
        context5.setLineDash([4, 2]);
        context5.lineDashOffset = -offset;
    }
    function march() {
        offset++;
        if (offset > 16) {
            offset = 0;
        }
        draw();
        setTimeout(march, 20)
    }
    march();


    var context4 = creatCanvas();

    for (var i = 0; i < 10; i++) {
        context4.lineWidth = 1 + i;
        context4.beginPath();
        context4.moveTo(5 + i * 14, 5);
        context4.lineTo(5 + i * 14, 140);
        context4.stroke();
    }
    //对话框 心形
    var context3 = creatCanvas();
    context3.beginPath();
    context3.moveTo(75, 25);
    context3.quadraticCurveTo(25, 25, 25, 62.5);
    context3.quadraticCurveTo(25, 100, 50, 100);
    context3.quadraticCurveTo(50, 120, 30, 125);
    context3.quadraticCurveTo(60, 120, 65, 100);
    context3.quadraticCurveTo(125, 100, 125, 62.5);
    context3.quadraticCurveTo(125, 25, 75, 25);

    context3.moveTo(275, 40);
    context3.bezierCurveTo(275, 37, 270, 25, 250, 25);
    context3.bezierCurveTo(220, 25, 220, 62.5, 220, 62.5);
    context3.bezierCurveTo(220, 80, 240, 102, 325, 120);
    context3.bezierCurveTo(310, 102, 330, 80, 330, 62.5);
    context3.bezierCurveTo(330, 62.5, 330, 25, 300, 25);
    context3.bezierCurveTo(285, 25, 325, 37, 325, 40);
    context3.fill();
    //    context3.stroke();
    context3.closePath();

    var context2 = creatCanvas();
    // 画背景
    context2.fillStyle = "#FD0";
    context2.fillRect(0, 0, 75, 75);
    context2.fillStyle = '#6C0';
    context2.fillRect(75, 0, 75, 75);
    context2.fillStyle = '#09F';
    context2.fillRect(0, 75, 75, 75);
    context2.fillStyle = '#F30';
    context2.fillRect(75, 75, 75, 75);
    // 设置透明度值
    context2.fillStyle = '#FFF'
    context2.globalAlpha = 0.2;
    // 画半透明圆
    for (var i = 0; i < 7; i++) {
        context2.beginPath();
        context2.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
        context2.fill();
//        context2.closePath();
    }

    var context = creatCanvas();
    context.fillStyle = "rgb(200,0,0)";
    context.fillRect(10, 10, 55, 50);
    context.fillStyle = "rgba(0, 0, 200, 0.5)";
    context.fillRect(30, 30, 55, 50);//填充矩形
    context.fillStyle = "rgba(0, 0, 0, 0.5)";
    context.strokeRect(50, 50, 55, 50);//矩形的边框
    context.fillStyle = "rgba(255, 255, 255)";
    context.clearRect(70, 70, 55, 50);//清除指定矩形区域，让清除部分完全透明
    //绘制三角形
    context.beginPath()
    context.moveTo(180, 10);
    context.lineTo(150, 10);
    context.lineTo(180, 30);
    context.fillStyle = "pink";
    context.fill();
    context.closePath();

    //绘制圆形
    context.beginPath();
    context.arc(180, 100, 50, 0, 2 * Math.PI, true);
    context.fillStyle = "#000";
    context.stroke();
    context.closePath();

    context.beginPath();
    context.moveTo(160, 85);//移动到切点
    context.arc(155, 85, 5, 0, 2 * Math.PI, true);
    //    context.fillStyle = "#000";
    context.moveTo(195, 85); //移动到切点
    context.arc(190, 85, 5, 0, 2 * Math.PI, true);
    context.moveTo(210, 110);
    context.arc(180, 110, 30, 0, 1 * Math.PI, false);
    context.stroke();
    context.closePath();
</script>
</body>
</html>